<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <title>Login and Register</title>
        <style type="text/css">
            .registerFrom {margin-top:10px;}
            #registerFrom {margin-top:10px;}
            .hiddenText{
                display: none;
                color: red;
            }
        </style>
        <script type="text/javascript" charset="utf-8">
            //<![CDATA[
            function submitCheck()
            {
                // clear all
                document.getElementById("hiddenText_usernameEmpty").style.display = "none";
                document.getElementById("hiddenText_password").style.display = "none";
                document.getElementById("hiddenText_retypedPassword").style.display = "none";

                // check
                if(document.getElementById("newUsername").value == "")
                {
                    document.getElementById("hiddenText_usernameEmpty").style.display = "inline";
                    return false;
                }
                if(document.getElementById("newPassword").value == "")
                {
                    document.getElementById("hiddenText_password").style.display = "inline";
                    return false;
                }
                if(document.getElementById("newPassword").value != document.getElementById("retypedPassword").value)
                {
                    document.getElementById("hiddenText_retypedPassword").style.display = "inline";
                    return false;
                }
                return true;
            }

            function fbs_click() {u=location.href;t=document.title;
            window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
            return false;}

            //]]>
        </script>
    </head>

    <body>
        <div id="container">
            <jsp:include page="includes/header.jsp" />
            <div class="main">
                <div class="services">
                    <div class="service_bg">
                        <h3>Our services</h3>
                        <p>Welcome to Cult Cinema! This is the welcome page of our cinema. You can log in, register, search movie and purchase on this website. Have fun!</p>
                    </div>
                    <div class="clr"></div>
                    <div class="service_bg">
                        <h3>About the author</h3>
                        <p><img src="images/user_pic.jpg" width="63" height="63" hspace="5" align="left" alt="picture" /><a href="#"><strong>ZHANG Niantong</strong></a><br />
                            Department of Computer Science, City University of Hong Kong</p>
                        <p><img src="images/user_pic.jpg" width="63" height="63" hspace="5" align="left" alt="picture" /><a href="#"><strong>ZHANG Hao</strong></a><br />
                            Department of Computer Science, City University of Hong Kong</p>
                    </div>
                    <div class="service_bg">
                        <h3>Contect us!</h3>
                        <p>Tat Chee Avenue, Kowloon, Hong Kong SAR  </p>
                        <p><span class="px22">+ 852 1111 1111</span></p>
                    </div>
                </div>
                <div class="global_main">
                    <div class="page_title_text">
                        <h1>Register Now!</h1>
                        <div class="clr"></div>
                        <div class="block_text">
                            <form action="registration.do" method="post" class="movieform" onsubmit="return submitCheck()">
                                <input type="hidden" name="action" value="register"/>
                                <%
                                            if (session.getAttribute("registerErrorMessage") != null) {
                                                out.print("<span class='hiddenText' style='display:block;'>Error: " + session.getAttribute("registerErrorMessage") + "</span>");
                                                session.setAttribute("registerErrorMessage", null);
                                            }
                                %>
                                <div class="registerFrom">
                                    <label>User name: </label>
                                    <input type="text" name="newUsername" id="newUsername" />
                                    <span class="hiddenText" id="hiddenText_usernameEmpty">Username Empty</span>
                                </div>
                                <div class="registerFrom">
                                    <label>Password: </label>
                                    <input type="password" name="newPassword" id="newPassword" />
                                    <span class="hiddenText" id="hiddenText_password">Password Empty</span>
                                </div>
                                <div class="registerFrom">
                                    <label>Type your Password again: </label>
                                    <input type="password" name="retypedPassword" id="retypedPassword" />
                                    <span class="hiddenText" id="hiddenText_retypedPassword">Two passwords are not the same!</span>
                                </div>
                                <div class="button" id="registerFrom" >
                                    <input type="submit" value="Register" />
                                    <input type="reset" value="Reset" />
                                </div>
                            </form>
                            <div class="clr"></div>
                        </div>
                    </div>
                    <div class="clr"></div>
                </div>
                <div class="clr"></div>
            </div>
            <jsp:include page="includes/footer.html" />
        </div>

    </body>
</html>